<template>
  <div class="lin_login_dialog" v-show="true">
    <div class="lin_login_dialog_list">
      <div class="lin_login_dialog_title">
        <ul>
          <li>
            <a @click='login(0)' :class="{'downline': loginstate,}" style="cursor: pointer;">Log in</a>
          </li>
          <li>
            <a @click='login(1)' :class="{'downline': registerstate,}" style="cursor: pointer;">Register</a>
          </li>
        </ul>
      </div>



      <div v-show="logincontent">
        <div class="lin_login_dialog_input" :model="logininfo">
            <div class="flex-column">
            <label>Email </label></div>
            <div class="inputForm">
              <svg height="20" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg"><g id="Layer_3" data-name="Layer 3"><path d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path></g></svg>
              <input type="text" class="input" v-model="logininfo.username" required placeholder="Enter your Email">
            </div>
            <div class="flex-column">

            <label>Password </label></div>
            <div class="inputForm">
              <svg height="20" viewBox="-64 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>        
              <input type="password" class="input" v-model="logininfo.password" required placeholder="Enter your Password">
              <!-- <svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"></path></svg> -->
            </div>

            <div class="flex-row">
              <div>
                <input type="checkbox" id="remember" value="checkbox">
                <label>Remember me </label>
              </div>
              <span class="span">Forgot password?</span>
            </div>

            <div >
              <NuxtLink><el-button v-on:click="LoginIn" color="#ffd200" size="large" style="width: 400px; height: 53px; font-size: 18px; font-weight: bold;">LOG IN</el-button></NuxtLink>
            </div>

        </div>
      </div>


      <div v-show="registercontent">
        <div class="lin_login_dialog_input" :model="registerinfo">

          <div class="flex-column">
          <label>Email </label></div>
          <div class="inputForm">
            <svg height="20" viewBox="0 0 32 32" width="20" xmlns="http://www.w3.org/2000/svg"><g id="Layer_3" data-name="Layer 3"><path d="m30.853 13.87a15 15 0 0 0 -29.729 4.082 15.1 15.1 0 0 0 12.876 12.918 15.6 15.6 0 0 0 2.016.13 14.85 14.85 0 0 0 7.715-2.145 1 1 0 1 0 -1.031-1.711 13.007 13.007 0 1 1 5.458-6.529 2.149 2.149 0 0 1 -4.158-.759v-10.856a1 1 0 0 0 -2 0v1.726a8 8 0 1 0 .2 10.325 4.135 4.135 0 0 0 7.83.274 15.2 15.2 0 0 0 .823-7.455zm-14.853 8.13a6 6 0 1 1 6-6 6.006 6.006 0 0 1 -6 6z"></path></g></svg>
            <input type="text" class="input" v-model="registerinfo.username" required placeholder="Enter your Email">
          </div>

          <div class="flex-column">
          <label>Password </label></div>
          <div class="inputForm">
            <svg height="20" viewBox="-64 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>        
            <input type="password" class="input" v-model="registerinfo.password" required placeholder="Enter your Password">
            <!-- <svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"></path></svg> -->
          </div>

          <label>Repassword </label>
          <div class="inputForm">
            <svg height="20" viewBox="-64 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m336 512h-288c-26.453125 0-48-21.523438-48-48v-224c0-26.476562 21.546875-48 48-48h288c26.453125 0 48 21.523438 48 48v224c0 26.476562-21.546875 48-48 48zm-288-288c-8.8125 0-16 7.167969-16 16v224c0 8.832031 7.1875 16 16 16h288c8.8125 0 16-7.167969 16-16v-224c0-8.832031-7.1875-16-16-16zm0 0"></path><path d="m304 224c-8.832031 0-16-7.167969-16-16v-80c0-52.929688-43.070312-96-96-96s-96 43.070312-96 96v80c0 8.832031-7.167969 16-16 16s-16-7.167969-16-16v-80c0-70.59375 57.40625-128 128-128s128 57.40625 128 128v80c0 8.832031-7.167969 16-16 16zm0 0"></path></svg>        
            <input type="password" class="input" v-model="registerinfo.repassword" required placeholder="Re-Enter your Password">
            <!-- <svg viewBox="0 0 576 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"></path></svg> -->
          </div>

          <div style="text-align: left; top: -90px; margin: 30px 0;">
            <el-button v-on:click="RegisterIn" color="#ffd200" size="large" style="width: 400px; height: 53px; font-size: 18px; font-weight: bold;">REGISTER</el-button>
            <p style="text-align: center; font-size: 12px;">Already have an account? <a href="#" style="color: #31a5ff; font-weight: bold;">Log in now</a></p>
          </div>
        </div>
      </div>


    </div>
  </div>
</template>


<script lang="ts">
import es from 'naive-ui'
import { Login, Register } from '@/utils/api';
import {useUserState} from '@/states/pinia'


export const useModelWrapper = (props: any, emit: any, name = 'modelValue') => {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, value),
  })
}

  export default defineComponent({
    props: { //接收父组件传来的数据，并指定类型
      visible: {
        type: Boolean,
        default: false,
      },
      editData: {
        type: Object,
      },

    },

    async setup(props, {emit}){
      const LoginVisible = useModelWrapper(props, emit, 'visible')
      const {editData,visible} = toRefs(props)
      const data = reactive({
        loginShow: ref(false),
        loginstate: ref(true),
        registerstate: ref(true),
        logincontent: ref(true),
        registercontent: ref(false),
        deal: ref(true),
        logininfo: {
          username: ref(),
          password: ref()
        },
        registerinfo: {
          username: ref(),
          password: ref(),
          repassword: ref()
        },
        userinfo: ref(),
        regex: ref(/^[^\s@]+@[^\s@]+\.[^\s@]+$/),
        loading: ref()
      })

      // 实例化路由对象
      const routers = useRouter()
      // 状态管理器实例化
      const State  = useUserState()



      const LoginIn = async(event: any) => {
        event.stopPropagation();
        let checkboxValue = document.getElementById("remember").checked ? true : false
        if(checkboxValue === false){
          return ElMessage({
            message: 'Please agree to the terms and conditions',
            type: 'error',
            duration: 1000,
            center: true,
          })
        }
        if(data.logininfo.username && data.logininfo.password){
          data.loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })

          await Login(
              data.logininfo
            ).then(async res => {
            data.userinfo = res._rawValue
            if (data.userinfo.userinfo){
              localStorage.setItem('user-info',JSON.stringify(data.userinfo.userinfo))
              State.restoreFromLocalStorage()
              data.loading.close()
              ElMessage({
                message: data.userinfo.message,
                type: 'success',
                duration: 1000,
                center: true,
              })
              routers.push({
                path: '/'
              })         
              return
            }
            data.loading.close()
            ElMessage({
              message: '账号密码错误！',
              type: 'error',
              duration: 1000,
              center: true,
            })
          })
          .catch(error => {
            console.log('error:', error);
            data.loading.close()
          })
          return
        }
        ElMessage({
          message: '账号或密码不能为空！',
          type: 'error',
          duration: 1000,
          center: true,
        })
      }


      const RegisterIn = async(event: any) => {
        event.stopPropagation();
        if(data.registerinfo.username && data.registerinfo.password === data.registerinfo.repassword ) {
          if(!data.regex.test(data.registerinfo.username)){
            return ElMessage({
              message: '请输入正确的邮箱格式！',
              type: 'error',
              duration: 2000,
              center: true,
            })
          }
          data.loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)',
          })

          await Register(
            data.registerinfo,
          ).then((res?: any) => {
            data.userinfo = res._rawValue
            data.loading.close()
            ElMessage({
              message: '注册成功',
              type: 'success',
              duration: 1000,
              center: true,
            })
            routers.push({
              path: '/login'
            })
            return
          })
          .catch(error => {
            data.loading.close()
            console.log('error:', error);
          })
          return
        }
        ElMessage({
          message: '密码不一致,重新输入！',
          type: 'error',
          duration: 2000,
          center: true,
        })
        return
      }



      const login = (index: any) => {
        if(index === 0){
          data.loginstate = true
          data.registercontent = false
          data.logincontent = true

        }
        else if (index === 1) {
          data.registerstate = true
          data.logincontent = false
          data.registercontent = true
        }
      }


      


      return{
        ...toRefs(data),
        login,
        LoginVisible,
        editData,
        visible,
        LoginIn,
        RegisterIn
      }
    }
  })


</script>


<style scoped>
* {
  color: rgb(0, 0, 0)
}
.lin_login_dialog {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  
}


.lin_login_dialog_list {
  width: 500px;
  height: 650px;
  background-color: rgb(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  margin-right: 100px;
  padding: 50px;
  
}

.lin_login_dialog_title ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.lin_login_dialog_title ul li {

  font-weight: bold;
  font-size: 18px;
}

.lin_login_dialog_input {
  margin-top: 50px;
  line-height: 50px;
}

.downline {
  display: inline;
  text-decoration: none;
  background: linear-gradient(to right, currentColor 0%, currentColor 100%);
  background-size: 0 2px;
  background-position: 0 95%;
  transition: background-size 0.2s linear 0s;
  background-repeat: no-repeat;
  padding-bottom: 10px;
  transition: all 0.2s ease-out;
}

.downline:hover {
  background-size: 100% 2px;
  outline: 0;
  color: rgb(0, 0, 0);
}

.loginShow {
  display: block;
}

.login {
  display: block;
}


.register {
  display: block;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-top: 20px;
}

.flex-row > div > label {
  color: black;
  font-weight: 400;
  margin-left: 5px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.span {
  font-size: 14px;
  margin-left: 5px;
  color: #2d79f3;
  font-weight: 500;
  cursor: pointer;
}


.inputForm {
  border: 1.5px solid #ecedec;
  border-radius: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  transition: 0.2s ease-in-out;
}

.input {
  margin-left: 10px;
  border-radius: 10px;
  border: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.input:focus {
  outline: none;
}

.inputForm:focus-within {
  border: 1.5px solid #f5268d;
}


.el-button {
  margin-top: 20px;
}

</style>